<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { reactive, watch, inject, Ref, ref, onBeforeUnmount, onMounted } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { searchGoodsCateApi, searchGoodsRuleCateApi, searchStoreApi } from '@/api/utils/search'
import { ElOption } from 'element-plus'
import { Row } from '@/api/advance'
const { required } = useValidator()
const currentRow: Ref<Row> = inject('currentRow') as Ref<Row>
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

// 获取门店
const options = ref([])
const getsearchStoreApi = async () => {
  const res = await searchStoreApi({ field: 'name,id' })
  options.value = res.data.list
}

// 获取商品
const optionsGoods = ref([])
const getsearchGoodsCateApi = async () => {
  const res = await searchGoodsCateApi({ field: 'name,id' })
  optionsGoods.value = res.data.list
}

// 获取商品规格
const optionsGoodsRule = ref([])
const getsearchGoodsRuleCateApi = async (val) => {
  console.log(val)
  const res = await searchGoodsRuleCateApi({ goods_id: val })
  optionsGoodsRule.value = res.data.list
}

onMounted(() => {
  getsearchStoreApi()
  getsearchGoodsCateApi()
})

const schema = reactive<FormSchema[]>([
  {
    field: '',
    label: '基础数据',
    component: 'Divider',
    colProps: { span: 28 },
    componentProps: {
      borderStyle: 'none',
      contentPosition: 'left'
    }
  },
  {
    field: 'store_id',
    label: '门店名称',
    component: 'Select',
    formItemProps: {
      rules: [required()]
    },
    componentProps: {
      placeholder: '请选择',
      options: options,
      slots: {
        default: (options) => {
          if (options.length) {
            return options?.map((v) => {
              return <ElOption key={v.id} label={v.name} value={v.id} />
            })
          } else {
            return null
          }
        }
      }
    }
  },
  {
    field: 'goods_id',
    label: '商品选择',
    component: 'Select',
    formItemProps: {
      rules: [required()]
    },
    componentProps: {
      placeholder: '请选择',
      options: optionsGoods,
      slots: {
        default: (optionsGoods) => {
          if (optionsGoods.length) {
            return optionsGoods?.map((v) => {
              return <ElOption key={v.goods_id} label={v.goods.name} value={v.goods_id} />
            })
          } else {
            return null
          }
        }
      },
      on: {
        change: (val) => {
          getsearchGoodsRuleCateApi(val)
        }
      }
    }
  },
  {
    field: 'goods_rule_id',
    label: '规格选择',
    component: 'Select',
    formItemProps: {
      rules: [required()]
    },
    componentProps: {
      placeholder: '请选择',
      options: optionsGoodsRule,
      slots: {
        default: (optionsGoodsRule) => {
          if (optionsGoodsRule.length) {
            return optionsGoodsRule?.map((v) => {
              return <ElOption key={v.goods_rule_id} label={v.spec_name} value={v.goods_rule_id} />
            })
          } else {
            return null
          }
        }
      }
    }
  },
  {
    field: '',
    label: '资金信息',
    component: 'Divider',
    colProps: { span: 28 },
    componentProps: {
      borderStyle: 'none',
      contentPosition: 'left'
    }
  },
  {
    field: 'money',
    label: '预存款金额',
    component: 'Input',
    formItemProps: {
      rules: [
        required(),
        {
          pattern: /^\d+(\.\d{1,2})?$/,
          message: '请输入正数且小数点后最多两位',
          trigger: 'blur'
        }
      ]
    },
    componentProps: {
      placeholder: '请输入'
    }
  }
])

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    const formDataList = {
      id: formData.id || '',
      store_id: formData.store_id || '',
      goods_id: formData.goods_id || '',
      goods_rule_id: formData.goods_rule_id || '',
      money: formData.money || ''
    }
    return formDataList
  }
}

const reset = async () => {
  const elForm = await getElFormExpose()
  elForm?.resetFields()
}

watch(
  () => currentRow.value,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

onBeforeUnmount(reset)

defineExpose({
  submit,
  reset
})
</script>

<template>
  <Form @register="formRegister" :schema="schema" />
</template>
